<template>
  <el-card class="box">
    <!-- <el-row :gutter="20" class="b">
      <el-col :span="6">
        <span class="a">姓名</span>
      </el-col>
      <el-col :span="6">
        <span class="a">出勤</span>
      </el-col>
      <el-col :span="6">
        <span class="a">绩效完成情况</span>
      </el-col>
      <el-col :span="6">
        <span class="a">相关证明材料</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="e" v-for="item in dailyData" :key="item.name">
      <el-col :span="6" class="c">
        <span class="a">{{item.name}}</span>
      </el-col>
      <el-col :span="6" class="c">
          <el-switch
            v-model="item.myValue"
            active-color="#00CC33"
            inactive-color="#FF0000"
          >
          </el-switch>
      </el-col>
      <el-col :span="6" class="c">
        <el-rate
          v-model="item.mark"
          :colors="colors">
        </el-rate>
      </el-col>
      <el-col :span="6" class="c">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="item.fileList">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-button class="d" @click="men">确认提交</el-button> -->
    <el-table
      :data="dailyData"
      style="width: 100%"
      border="true"
      stripe="true">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="attendance"
        label="出勤"
        width="180">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.attendance"
              active-color="#00CC33"
              inactive-color="#FF0000"
            >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="myValue"
        label="绩效完成情况">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.myValue"
            :colors="colors">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column
        prop="fileList"
        label="相关证明材料">
        <template slot-scope="scope">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="scope.row.fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;text-align: center;">
      <el-button @click="men">确认提交</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      dailyData: [
        {
          name: '小明',
          attendance: true,
          material: '',
          myValue: 'false',
          mark: null,
          fileList: [
            {
              name: 'word.jpeg', 
              url: ''
            }
          ],
          bc: 'true'
        },
        {
          name: '小林',
          attendance: true,
          material: '',
          myValue: 'true',
          mark: null,
          fileList: [
            {
              name: 'job.jpeg', 
              url: ''
            },
            {
            name: 'time.jpeg', 
            url: ''
            }
          ],
          bc: 'false'
        },
        {
          name: '小张',
          attendance: false,
          material: '',
          myValue: 'true',
          mark: null,
          fileList: [
            {
              name: 'where.jpeg', 
              url: ''
            },
            {
            name: 'what.jpeg', 
            url: ''
            }
          ],
          bc: 'true'
        }
      ]
    }
 },
  methods: {
    handleClick() {
      alert('button click');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    men(){
      this.$message({
        message:'提交信息成功',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 80%;
}
.a {
  font-size: 25px;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 10px;
  color: rgb(3, 3, 3);
}
.b {
  text-align: center;
  margin-top: 30px;
}
.c {
  margin-top: 20px;
  margin-bottom: 20px;
}
.d {
  width: 150px;
  border: 2px solid #0f6f7c;
  font-size: 25px;
  cursor: pointer;
  background-color: rgb(137, 183, 209);
  position: absolute;
  bottom: 3%;
  left: 55%;
}
.d:hover {
  background-image: linear-gradient(120deg, #7c14dd 0%, #2b78c5 100%);
  font-size: large;
}
.e {
  text-align: center;
  margin-top: 30px;
  border-block-color: #6d6868;
  border-style: groove;
  border-width: 1px;
}
</style>